// COUPLING:
// height and width are calculated from the instance variable of Box.
// In fact,it is chosen to fit 10 of Course_Slots into the Box
    
var static_variables=new Array();

static_variables["course_slot_width"]=50
static_variables["course_slot_height"]=30;    
//All container must be of this type.
//
var ContainerTitleEnum=["computer_science", "software_engineering", "engineering_core"];


    var box=Box("computer_science");
function on_click(){
    
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
box.draw(ctx);

    /**
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
draw_rectangle(ctx);
draw_sljot(ctx);
**/
}


function draw_rectangle(ctx){
    ctx.fillStyle="rgb(200,0,0)";
    ctx.fillRect(30,30,50,50);
}



function draw_slot(ctx){
    /**
ctx.fillStyle="rgb(0,100,0)";
      ctx.fillRect(10,40,40,10);
      **/

}

/**
 * ARGUMENTS:
 *     Title: enumeration of type ContainerTitleEnum
 *
 */ 
function Box(title){
    // Title: enumeration of type ContainerTitleEnum
    this.title=title; 
    this.slots=null;
    this.box_width=500;
    this.box_height=90;
    this.pos_x=0;
    this.pos_y=0;
    //populates the this.slots array with the correct courses_slots (depending on the this.title)
    this.course_slots_factory=Course_Slot_Factory(this);

    this.course_slot_layout_manager=new Course_Slot_Layout_Manager();
    this.course_slot_layout_manager.new_box(this);
    this.draw=function draw(ctx){
         this.course_slot_layout_manager.draw(ctx);
    }
}


function Course_Slot_Layout_Manager(){
    this.box=null;
    this.number_of_boxes=0
    this.new_box=function new_box(box){
        this.box=box;
        this.number_of_boxes+=1;        
        
       
    
    }
    
    // COUPLING:
    // slots instance variable in Box is guaranteed to be a two dimentional array
    this.draw=function draw(ctx){
        ctx.save();
        for(var i=0;i<box.slots.length;i++){
            for(var j=0;j<box.slots[i].length;j++){
                this.set_coordinate_system(ctx,[i,j]); 
                box.slots[i][j].draw(ctx);
                ctx.translate(static_variables['course_slot_width'],static_variables['course_slot_height']);
            }
        } 
        ctx.restore();
    }


}



/** 
 * INPUT:
 * container is a Container 
 * TODO
 * Queries the server for the courses
 * **/
function Course_Slot_Factory(container){
   this.create_slots=function create_slots(slots){
       for(var i=0;i<3;i++){
           var slots=new Array();
           for(var j=0;j<10;j++){
               slots[i]=new Course_Slot("avatar");
           }
       }
    } 
    this.create_slots(container.slots);
    /**
     INPUT:
         an array 
     OUTPUT:
         the slots variable is populated with generic Course_Slots 
     **/
    
}





function Course_Slot(title){
    //title of the Course_Slot
    this.title=title;
    this.to_string=function to_string(){
        return this.title;
    }


    this.draw=function draw(ctx){
        ctx.fillStyle="rgb(0,200,0)";
        ctx.fillRect(0,0,static_variables["course_slot_width"],static_variables["course_slot_height"]); 
                
    
    }

}

